<template>
    <div>
        <!-- 客户选择区 -->
        <el-dialog v-model="props.CustomerDialog" title="" @close="handleClose"
            :style="{ width: '70%' }">

            <div style="text-align: center; margin-bottom: 40px;">
                <span style="font-size: 18px; font-weight: normal;">客户选择</span>
            </div>

            <el-form :model="form" label-width="100px">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="客户编码" :class="{ 'bold-label': true }">
                            <el-input v-model="form.customerCode" placeholder="请输入客户编码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户名称" :class="{ 'bold-label': true }">
                            <el-input v-model="form.customerName" placeholder="请输入客户名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户简称" :class="{ 'bold-label': true }">
                            <el-input v-model="form.customerAbbreviation" placeholder="请输入客户简称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="是否启用" :class="{ 'bold-label': true }">
                            <el-select v-model="form.status" placeholder="是否启用">
                                <el-option label="是" value="0"></el-option>
                                <el-option label="否" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button :icon="Search" type="primary" @click="onSearch">搜索</el-button>
                            <el-button :icon="Refresh" plain @click="onReset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 表格组件 -->
            <el-table :data="tableData" style="width: 100%" highlight-current-row @row-click="handleRowClick">
                <el-table-column type="index" width="50" />
                <el-table-column prop="customerCode" label="客户编码" align="center" />
                <el-table-column prop="customerName" label="客户名称" align="center" />
                <el-table-column prop="customerAbbreviation" label="客户简称" align="center" />
                <el-table-column prop="customerType" label="客户类型" align="center">
                    <template #default="scope">
                        {{ scope.row.customerType === '0' ? '个人' : '私企' }}
                    </template>
                </el-table-column>
                <el-table-column prop="customerPhone" label="客户电话" align="center" />
            </el-table>
            <!-- 分页组件 -->
            <div class="pagination">
                <el-pagination :current-page="form.currentPage" :page-size="form.pageSize" :page-sizes="pageSizes"
                    :total="pageResult.total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <div style="text-align: center; margin-top: 20px;">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleCancel">取消</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import { findCustomer } from '@/apis/xms/index';
const rowData = ref({});//表格选中行
const props = defineProps(['CustomerDialog']);
const emit = defineEmits(['close-dialog', 'rowDataA']);
const form = ref({
    currentPage: 1,
    pageSize: 10,
    customerCode: '',
    customerName: '',
    customerAbbreviation: "",
    status: '',
});//查询参数
const tableData = ref([]);//表格数据
const pageResult = ref([]);//分页数据
const loadList = async () => {//刷新数据
    pageResult.value = await findCustomer(form.value);
    tableData.value = pageResult.value.records
}

// 分页大小
const pageSizes = [10, 20, 30, 40, 50]
/**
 * 处理分页大小变化
 * @param size 当前分页大小
 */
const handleSizeChange = async (size) => {
    form.pageSize = size;
    await loadList();
}
/**
 * 处理当前页码变化
 * @param currentPage 当前页码
 */
const handleCurrentChange = async (currentPage) => {
    form.currentPage = currentPage
    await loadList();
}
//搜索功能
const onSearch = async () => {
    // ElMessage.success('搜索功能已触发')
    await loadList();
}
//搜索条件重置
const onReset = async () => {
    Object.keys(form.value).forEach(key => {
        form.value[key] = null
    })
    await loadList();
}

//弹窗取消事件
function handleCancel() {
    emit('close-dialog');
    onReset();
}
//获取表格选中的行
const handleRowClick = (row, event) => {
    rowData.value = row;
}
//提交事件
function handleSubmit() {
    emit('rowDataA', rowData.value)
    handleClose();
}
//关闭弹窗
const handleClose = () => {
    emit('close-dialog');
    onReset();
}

onMounted(async () => {
    await loadList()
})
</script>

<style scoped>
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>